<!--未来24小时预警因子浓度等级预测 1 -->
<template>
    <CommonTitleComponent text="未来24小时预警因子浓度等级预测"></CommonTitleComponent>
    <div class="futureFlex">
        <chart-view
            :chart-option="EchartsMethods.future1(state.future)"
            :auto-resize="true"
            height="100%"
            style="height: 95%; flex: 1"
        ></chart-view>
        <CustomGreenInitiativeCommonLoadDownList
            :list="state.list"
            @list-item="listItems"
        ></CustomGreenInitiativeCommonLoadDownList>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { EchartsMethods } from '@/chart/index';

const state = reactive({
    future: {
        type: 'future1',
        seriesList: [
            {
                name: '8:00',
                value: 175.17
            },
            {
                name: '9:00',
                value: 148.35
            },
            {
                name: '10:00',
                value: 95.36
            },
            {
                name: '11:00',
                value: 56
            },
            {
                name: '12:00',
                value: 45
            }
        ]
    },
    list: [{ name: 'PM2.5' }, { name: 'PM10' }, { name: 'CO' }, { name: '甲醛' }]
});
const listItems = (e: any) => {
    console.log(e, '1');
};
</script>

<style scoped lang="scss">
.futureFlex {
    display: flex;
    align-items: center;
    height: 100%;
}
</style>
